<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for drawing, defining the geometry of the diagram
    const cx = 180; // x-coordinate of the z-axis (origin's x on canvas)
    const cy = 250; // y-coordinate of the v-axis (origin's y on canvas)
    const z_s_val = 120; // Vertical distance from origin to z_s
    const v0_val = 40;   // Horizontal distance from origin to v0
    const v_s_val = 150; // v-coordinate at z=z_s and z=-z_s

    // General style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    // --- 1. Draw Coordinate Axes ---
    // z-axis
    ctx.beginPath();
    ctx.moveTo(cx, cy - z_s_val - 50);
    ctx.lineTo(cx, cy + z_s_val + 50);
    ctx.stroke();
    // Arrow for z-axis
    ctx.beginPath();
    ctx.moveTo(cx, cy - z_s_val - 50);
    ctx.lineTo(cx - 6, cy - z_s_val - 40);
    ctx.moveTo(cx, cy - z_s_val - 50);
    ctx.lineTo(cx + 6, cy - z_s_val - 40);
    ctx.stroke();

    // v-axis
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + v_s_val + 50, cy);
    ctx.stroke();
    // Arrow for v-axis
    ctx.beginPath();
    ctx.moveTo(cx + v_s_val + 50, cy);
    ctx.lineTo(cx + v_s_val + 40, cy - 6);
    ctx.moveTo(cx + v_s_val + 50, cy);
    ctx.lineTo(cx + v_s_val + 40, cy + 6);
    ctx.stroke();

    // --- 2. Draw the Graph (Velocity Profile) ---
    ctx.beginPath();
    ctx.moveTo(cx + v0_val, cy);
    ctx.lineTo(cx + v_s_val, cy - z_s_val);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(cx + v0_val, cy);
    ctx.lineTo(cx + v_s_val, cy + z_s_val);
    ctx.stroke();
    
    // --- 3. Draw Dashed Helper Lines ---
    ctx.save(); // Save current state to easily restore later
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1;
    // Dashed line for z_s
    ctx.moveTo(cx, cy - z_s_val);
    ctx.lineTo(cx + v_s_val, cy - z_s_val);
    ctx.stroke();
    // Dashed line for -z_s
    ctx.beginPath();
    ctx.moveTo(cx, cy + z_s_val);
    ctx.lineTo(cx + v_s_val, cy + z_s_val);
    ctx.stroke();
    ctx.restore(); // Restore to solid lines and original line width

    // --- 4. Draw Labels and Annotations ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Axis Labels
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('z', cx, cy - z_s_val - 65);
    ctx.fillText('v', cx + v_s_val + 65, cy);
    
    // Origin Label 'O'
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('O', cx - 20, cy);

    // Coordinate labels with subscripts
    // Label for z_s
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'right';
    const z_x = cx - 15;
    const z_y_top = cy - z_s_val;
    ctx.fillText('z', z_x, z_y_top);
    ctx.font = '14px Times New Roman'; // Non-italic for subscript
    ctx.textAlign = 'left';
    ctx.fillText('s', z_x + 2, z_y_top + 8);

    // Label for -z_s
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'right';
    const z_y_bottom = cy + z_s_val;
    ctx.fillText('-z', z_x, z_y_bottom);
    ctx.font = '14px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('s', z_x + 2, z_y_bottom + 8);
    
    // Label for v_0
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    const v_x = cx + v0_val;
    const v_y = cy + 25;
    ctx.fillText('v', v_x, v_y);
    ctx.font = '14px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('0', v_x + 7, v_y + 8);

    // --- 5. Draw the Caption ---
    ctx.font = '22px SimHei, sans-serif'; // Common Chinese font
    ctx.textAlign = 'center';
    ctx.fillText('力图 7.35.1', canvas.width / 2, cy + z_s_val + 80);

</script>

</body>
</html>